<template>
    <div class="common-layout">
        <el-container>

            <!-- 头部 -->
            <el-header>

                <!-- 头部导航 -->
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                    @select="handleSelect" router>
                    <el-menu-item class="imgLogo"><img src="../../../public/commonHeader.png" alt=""></el-menu-item>
                    <div class="flex-grow" />
                    <el-menu-item index="/home">首页</el-menu-item>
                    <el-menu-item index="/drugsIndex">药品</el-menu-item>
                    <el-menu-item index="/orderManagement">订单</el-menu-item>
                    <el-menu-item index="/promotionIndex">促销</el-menu-item>
                    <el-menu-item index="/userLists">用户</el-menu-item>
                    <el-menu-item index="/settingIndex">设置</el-menu-item>
                    <el-menu-item index="/contentIndex">内容</el-menu-item>
                    <el-menu-item index="/authorityIndex">权限</el-menu-item>
                    <div class="flex-grow" />
                    <el-menu-item index="/accountSettings">账户设置</el-menu-item>
                    <el-menu-item index="11" @click="exitLogin">退出登录</el-menu-item>
                </el-menu>

                <!-- 头部面包屑 -->
                <BreadcrumbItemNav />

                <div>
                    <!-- <ScreenfullBtnOne/> -->

                </div>
            </el-header>

            <!-- 侧边导航 内容渲染区 -->
            <el-container>
                <el-aside width="200px">
                    <!-- 侧边栏导航出口 -->
                    <CommonAside />
                </el-aside>
                <el-container>
                    <el-main>

                        <!-- 侧边栏导航 二级路由出口 -->
                        <!-- <router-view></router-view> -->
                        <router-view><router-view></router-view></router-view>


                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts" name="home">
import CommonAside from './ComponentsDashBoard/CommonAside.vue';
import BreadcrumbItemNav from '../components/BreadcrumbItemNav.vue'
import ScreenfullBtnOne from '../components/ScreenfullBtnOne.vue'

import { useRouter } from 'vue-router';
import { nextTick, ref, watch, inject } from 'vue'
import { ElMessage } from 'element-plus';
import { removeUserInfomation } from '@/utils/login';

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}


// 退出登录
const router = useRouter()
const exitLogin = () => {
    // 清除所有信息后 缓存token、cookies
    removeUserInfomation()
    // 有接口鉴权、登录路由鉴权 刷新go(0)等同于replace 自动去login页
    // router.replace('/login')
    ElMessage({
        message: '退出登录成功',
        type: 'error',
        duration: 2500,
        onClose: () => {
            router.replace('/login')
        }
    })
}


</script>

<style lang="scss" scoped>
.common-layout {
    .el-container {
        height: 100vh;
        overflow: hidden;

        .el-aside {
            background-color: #22252C;
            // height: 100vh;
            max-width: 160px;
        }

        .el-header {
            background-color: #22252C;
            height: 80px;
        }

        .el-main {

            --el-main-padding: 0px;
        }
    }
}

.imgLogo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        vertical-align: center;
        line-height: 100%;
        height: 45px;
    }
}

.el-menu {
    background-color: #22252C;
    border-bottom: none;
}

.el-menu--horizontal>.el-menu-item {
    color: white;

}

.el-menu--horizontal>.el-menu-item.is-active {
    border: none;
    border-top: 3px solid red;
    font-weight: bold;
}

.flex-grow {
    flex-grow: 0.5;
}
</style>